<template>
  <div>
    <!-- 搜索面板 -->
    <table-search-panel :title="title" :columns="columns">
      <el-form :inline="true" :model="dataOfSearch" size="mini">
        <template v-for="(col, idx) of columns">
          <template v-if="col.searchable">
            <el-form-item :label="col.title" :key="idx" v-if="col.name == 'custom_field'">
              <el-date-picker v-model="dataOfSearch[col.name]" type="datetimerange" range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item :label="col.title" :key="idx" v-else>
              <el-input v-model="dataOfSearch[col.name]"></el-input>
            </el-form-item>
          </template>
        </template>
        <el-form-item>
          <el-button type="primary" :loading="loadingOfSearch" @click="onSearch()">查询</el-button>
        </el-form-item>
      </el-form>
    </table-search-panel>
    <el-card id="tableCard">
      <div slot="header">
        <!-- 工具栏 -->
        <table-toolbar :columns="columns" :loading-of-refresh.sync="loadingOfRefresh" :title-of-print="title"
          @click="onClickToolbar">
        </table-toolbar>
      </div>
      <el-table :data="dataOfMain" style="width: 100%" height="555px" fixed :loading="loadingOfTable"
        @selection-change="onCheckTableRows">
        <el-table-column type="selection" width="55"> </el-table-column>
        <template v-for="(col, idx) of columns">
          <template v-if="col.visible">
            <el-table-column :prop="col.name" :label="col.title" :key="idx">
            </el-table-column>
          </template>
        </template>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button @click="onClickToolbar('detail', scope.row)" type="text" size="small">查看</el-button>
            <el-button type="text" size="small" @click="onClickToolbar('edit', scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="onClickToolbar('delete', scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <dict-edit ref="editDialog" @close="onCloseDialog('edit')"></dict-edit>
    <div class="pagnation-bar">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"
        :total="400">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import DictEdit from "./DictsEdit.vue";
import TableSearchPanel from "@/components/TableSearchPanel/TableSearchPanel.vue";
import TableToolbar from "@/components/TableToolbar/TableToolbar.vue";
/**
 * 会员管理页面
 */
export default {
  name: "DataDictIndex",
  components: { DictEdit, TableSearchPanel, TableToolbar },
  data() {
    return {
      // 页面标题
      title: "数据字典管理",
      currentPage4: 4,
      // 加载状态
      loadingOfRefresh: false,
      loadingOfSearch: false,
      loadingOfTable: false,
      // 表格列的信息
      columns: [
        { name: 'date', title: '日期', visible: true, searchable: true, component:'textbox' },
        { name: 'name', title: '名字', visible: true, searchable: true, component:'textbox' },
        { name: 'address', title: '地址', visible: true, searchable: true, component:'textbox'},
      ],
      // 查询数据
      dataOfSearch: {
        keyword: "",
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      // 表格数据
      dataOfMain: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    loadData() {
      this.loadingOfTable = true;
      this.vuiAjax
        .get(this.apiUrls.membersIndex, { params: this.dataOfSearch })
        .then((ret) => {
          this.loadingOfRefresh = false;
          this.loadingOfSearch = false;
          this.loadingOfTable = false;
          console.log("====", ret);
          if (!ret.success) {
            this.$message.error(ret.message);
            return;
          }
          // this.dataOfMain=ret.data.data;
        })
        .catch((msgInfo) => {
          this.loadingOfRefresh = false;
          this.loadingOfSearch = false;
          this.loadingOfTable = false;
          this.$message.error(msgInfo.msg);
        });
    },
    // 表格行勾选事件
    onCheckTableRows(val) {
      console.log("表格行勾选事件 ", val);
    },
    onClickToolbar(name, item) {
      console.log("[onClickToolbar] ", name, item);
      switch (name) {
        case "create":
          console.log("点击按钮 工具栏 - 新增");
          this.$refs.editDialog.open("新增会员");
          break;
        case "edit-multi":
          console.log("点击按钮 工具栏 - 批量编辑");
          this.$refs.editDialog.open("批量编辑");
          break;
        case "copy-multi":
          console.log("点击按钮 工具栏 - 批量复制");
          break;
        case "delete-multi":
          console.log("点击按钮 工具栏 - 批量删除");
          break;
        case "import":
          console.log("点击按钮 工具栏 - 导入");
          // 设置导入表单参数等
          break;
        case "export":
          console.log("点击按钮 工具栏 - 导出");
          break;
        case "refresh":
          console.log("点击按钮 工具栏 - 刷新");
          this.loadingOfRefresh = true;
          this.loadData();
          break;
        case "edit":
          console.log("点击按钮 单元格 - 编辑");
          this.$refs.editDialog.open("编辑小王", 1);
          break;
        case "delete":
          console.log("点击按钮 单元格 - 删除");
          break;
        case "copy":
          console.log("点击按钮 单元格 - 复制");
          break;
        default:
          break;
      }
    },
    // 查询操作
    onSearch() {
      this.loadingOfSearch = true;
      this.loadData();
    },
    // 导入文件操作
    onUpload(success, ret) {
      if (!success) {
        this.$message.error(ret.message);
        return;
      }
      console.log("上传成功 ", ret);
    },
  },
  created() {
    this.loadData();
  },
};
</script>

<style>
.el-card__header {
  padding: 10px;
}

.el-card__header h4 {
  margin: 0;
}

.card-search .el-card__body {
  padding: 10px 10px;
}

.search-simple .el-form-item--mini.el-form-item {
  margin-bottom: 0;
}
</style>